<template>
    <div class="main">
        <van-tabs v-model="active" @change='changeTab'>
            <van-tab title="未使用"></van-tab>
            <van-tab title="已使用"></van-tab>
            <van-tab title="已过期"></van-tab>
        </van-tabs>
        <van-skeleton class="skeleton" title :row="3" :loading="loading">
            <div class="content" v-if="couponList.length>0">
                <div class="item" v-for="item in couponList" :key="item.id">
                    <div class="card" >
                        <p>
                            <span>{{item.amount}}元</span>
                        </p>
                        <h1>贵宾卡</h1>
                        <h4>{{item.beginDate|dateStyle}}至{{item.endDate|dateStyle}}</h4>
                    </div>
                </div>
            </div>
            <div class="null" v-else>
                暂无贵宾卡记录
            </div>
        </van-skeleton>
    </div>
</template>
<script>
import { setLocal, getLocal, delLocal } from '@/utils/storage'
export default {
    data(){
        return{
            active:0,
            couponList:[],
            status:1,
            userInfo:[],
            loading:false,
        }
    },
    created(){
        this.userInfo = JSON.parse(getLocal('userInfo')) 
        console.log('this.userInfo---------',this.userInfo)
		if (!this.userInfo.id) {
			 this.$toast('您还未登录~ ')
			 this.$router.push('/')
		}
        this.getCouponList()
    },
    methods:{
        async getCouponList(){
            this.loading = true
            let res = await this.$api.queryUserCouponList({
                status:this.status,
                userId:this.userInfo.id
            })
            if (res) {
				if (res.status == 200) {
					this.couponList = res.data.list
				}
			}
            this.loading = false
            console.log(res)
        },
        //切换tab标签
        changeTab(name,title){
            console.log(name,title)
            this.status=name+1
            console.log('this.status----------',this.status)
            this.getCouponList()
        }
    },
    filters:{
        dateStyle(v){
            let date = new Date(v)
            let Y = date.getFullYear()
            let M = date.getMonth()+1
            let D = date.getDate()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getMilliseconds()
            if (M<10) {
                M = '0'+M
            }
            if (D<10) {
                D = '0'+D
            }
            
            let value =`${Y}-${M}-${D}`
            return value
        }
    }
}
</script>
<style lang="less">
    .main{
        .skeleton{
            margin-top: 0.2rem;
        }
        .content{
            margin-top:0.2rem;
            .item{
                width: 90%;
                margin: 0.2rem auto;
                background-color: #efefef;
                background: url(../../assets/img/card.png)center/cover no-repeat;
                padding: 0.3rem 0.6rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .card{
                    color:#fff;
                    p{
                        font-size: 0.4rem;
                        text-align: right;
                    }
                    h1{
                        font-size: 0.8rem;
                        box-sizing: border-box;
                        padding-left: 26%;
                        margin-top: 0.4rem;
                        margin-bottom: 1rem;
                        position: relative;
                        
                    }
                    h1::after{
                        content: 'VIP';
                        font-size: 0.5rem;
                        position: absolute;
                        right: 30%;
                        top:0.6rem;
                        font-style:italic;
                    }
                    h4{
                        font-size: 0.4rem;
                        text-align: right;
                    }
                }
            }
        }
        .null{
            text-align: center;
            margin: 20vh auto;
        }
    }
</style>